<template>
	<view class="ucenter">
		<image src="/static/image/ucenter/my-bg4.png" mode="aspectFill" class="my_bg"></image>
		<view class="header_cell">
			<view class="user_info">
				<view class="flex justify-center align-center">
					<image
						src="../../static/image/ucenter/defaultAvatarUrl.png"
						mode="aspectFill"
						class="user_photo"
					></image>
					<view>
						<view class="text-black text-bold">
							<text class="text-xl" style="font-weight: bold;">小周要开心！</text>
							<text class="cu-tag round bg-red" style="margin-left: 20rpx;">未实名</text>
						</view>
						<view class="text-grey">
							<span>Akaibiu</span>
							<span>177****1107</span>
						</view>
					</view>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<view class="auth_btn">
				<button class="cu-btn round bg-black" @tap="loginBtn">
					<text class="lg text-white cuIcon-weixin" style="margin-right: 20rpx;"></text>
					授权登录
				</button>
			</view>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		methods: {
			loginBtn() {
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res)
						},
					})
			},
			
		}
	}
</script>

<style lang="less" scoped>
.ucenter{
	padding: 30rpx;
	.mt30 {
		margin-top: 30rpx;
	}
	.my_bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
	}
	.header_cell {
		margin-top: 100rpx;
		.user_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.user_photo {
				width: 120rpx;
				height: 120rpx;
				box-shadow: 0px 0px 10rpx 1px rgba(0, 0, 0, 0.1);
				border-radius: 50%;
				background-color: white;
				margin-right: 20rpx;
			}
		}
		.auth_btn {
			margin: 50rpx auto;
			text-align: center;
			& > button {
				box-shadow: 3px 3px 10rpx 1px rgba(0, 0, 0, 0.2);
				padding-left: 50rpx;
				padding-right: 50rpx;
			}
		}
	}
	}
</style>
